<template>
    <div class="page-wrap" v-loading="loading">
        <!-- 搜索表单 -->
        <el-card class="search-form-card">
            <div class="search-form-wrap">
                <div class="search-form-item">
                    <div class="search-form-item-label">App名称：</div>
                    <div class="search-form-item-input">
                        <el-input v-model="search_form.appName" placeholder="请输入" :size="size" @keyup.native.enter="handleFormSearch"></el-input>
                    </div>
                </div>
                <div class="search-form-item">
                    <div class="search-form-item-label">版本号：</div>
                    <div class="search-form-item-input">
                        <el-input v-model="search_form.version" placeholder="请输入" :size="size" @keyup.native.enter="handleFormSearch"></el-input>
                    </div>
                </div>
                <div class="search-form-item">
                    <div class="search-form-item-label"></div>
                    <div class="search-form-item-input">
                        <el-button type="primary" :size="size" icon="el-icon-search"
                            @click="handleFormSearch">查询</el-button>
                        <el-button :size="size" @click="handleSearchFormReset">重置</el-button>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 表格区域 -->
        <el-card class="table-card">
            <!-- 工具栏 -->
            <div class="toolbar-box">
                <div class="left-box">
                    <el-button :size="size" icon="el-icon-refresh" @click="handleRefreshList"></el-button>
                    <el-button :size="size" icon="el-icon-plus" type="success" v-if="showAddBtn"
                        @click="handleAddRow">新增</el-button>
                    <el-button :size="size" icon="el-icon-edit" type="success" @click="handleEditRow" v-if="showEditBtn"
                        :disabled="selectedRows.length != 1">编辑</el-button>
                    <el-button :size="size" icon="el-icon-delete" type="danger" @click="handleDelRows('')" v-if="showDelBtn" :disabled="selectedRows.length == 0">删除</el-button>
                </div>
                <div class="right-box">
                    <!-- <el-button :size="size" icon="el-icon-download">导出</el-button> -->
                </div>
            </div>
            <!-- 表格内容 -->
            <div class="table-box">
                <el-table :data="tableData" style="width: 100%" :border="border" :size="size"  row-key="id"  :tree-props="{children: 'children'}"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="appName" label="App名称" width="120">
                    </el-table-column>
                    <el-table-column prop="version" label="版本号" width="100">
                    </el-table-column>
                    <el-table-column prop="fileName" label="文件名" width="240">
                    </el-table-column>
                    <!-- <el-table-column prop="filePath" label="文件路径" width="350">
                    </el-table-column> -->
                    <el-table-column prop="content" label="更新内容">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" :content="scope.row.content" placement="top-start" popper-class="popper-br-content">
                                <span>{{ scope.row.content }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createdAt" label="发布时间" width="160">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                                @change="handleUpdateField(scope.row, 'status')"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" icon="el-icon-edit" circle size="mini" @click="handleEditRow(scope.row)" v-if="showEditBtn"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="handleDelRows(scope.row.id)" v-if="showDelBtn"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 分页 -->
        <div class="pagination-wrap">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :pager-count="pagerCount"
                layout="total, sizes, prev, pager, next" :total="total">
            </el-pagination>
        </div>

        <!-- 弹窗 -->
        <form-dialog ref="formDialog" :title="dialog_title" @submit="handleSubmit"></form-dialog>
    </div>
</template>

<script>
//引入混入逻辑
import mixin from '@/mixins/table'
//引入接口配置
import {indexApi, addApi, editApi, delApi, updateFieldApi} from '@/api/appVersions'
//引入弹出组件
import formDialog from './components/form-dialog.vue'

export default {
    name: 'appVersions',
    //CRUD所定义的字段和方法在mixin定义
    mixins: [mixin],
    data() {
        return {
            indexApi, addApi, editApi, delApi, updateFieldApi,//接口注册
            
            search_form: {
                appName: "",
                version: "",
            },//搜索表单

            loading: false,//页面加载状态
        }
    },
    components: {
        formDialog
    },
    created() {
        //获取表格数据
        this.getTableData()
    },
    methods: {
        //处理表单提交事件
        handleSubmit(form){
            //执行提交请求
            this.requestSubmit(form)
        },
    },
    computed: {
        
    }
}
</script>

<style scoped lang="scss">

</style>